<template>
	<view id="sortableBody" :prop="renderJsOptions" :change:prop="Sortable.create">
		<slot />
	</view>
</template>

<script>
	export default {
		props: {
			// 对Sortable参数配置可以写在此处或传递进入（App暂不可用）
			options: {
				type: Object,
				default: function() {
					return {}
				}
			},
			// 需要拖动元素的父级节点
			domId: {
				type: String,
				default: ''
			}
		},
		methods: {
			changeList(list) {
				this.$emit('changeList', list);
			}
		},
		computed: {
			// renderjs 貌似只接受一个prop参数 所以将数据打包传递
			renderJsOptions() {
				return {
					options: this.options,
					domId: this.domId
				}
			}
		}
	}
</script>

<script module="Sortable" lang="renderjs">
	import Sortable from 'sortablejs';

	export default {
		data(){
			return{
				sortable: null
			}
		},
		methods: {
			create() {
				let {
					domId,
					options
				} = this.renderJsOptions;

				if (!domId) {
					console.error('props domId is null!!');
					return;
				}
				
				// 避免二次初始化
				if(this.sortable){
					this.sortable.option("disabled", options.disabled)
					return;
				}
				
				let _this = this;
				
				setTimeout(() => {
					let sortable = Sortable.create(document.getElementById(domId), {
						animation: 150, //动画参数
						onAdd: function(evt) {
							//拖拽时候添加有新的节点的时候发生该事件
							console.log("onAdd:", [evt.item, evt.from]);
						},
						onUpdate: function(evt) {
							//拖拽更新节点位置发生该事件
							console.log("onUpdate:", [evt.item, evt.from]);
						},
						onRemove: function(evt) {
							//删除拖拽节点的时候促发该事件
							console.log("onRemove:", [evt.item, evt.from]);
						},
						onStart: function(evt) {
							//开始拖拽出发该函数
							console.log("onStart:", [evt.item, evt.from]);
						},
						onSort: function(evt) {
							//发生排序发生该事件
							console.log("onSort:", [evt.item, evt.from]);
						},
						onEnd: function(evt) {
							//拖拽完毕之后发生该事件
							console.log("onEnd:", [evt.item, evt.from]);
							_this.$ownerInstance.callMethod('changeList', sortable.toArray());
						},
						...options
					});
					this.sortable = sortable;
					
				},300)
				
			}
		}
	}
</script>


<style scoped lang="scss">

</style>
